<template>
	<scroll-view  scroll-y="true" class="scroll-Y"  show-scrollbar=false scroll-with-animation=true @scrolltoupper="upper" @scroll='isscro' :scroll-top="scrollTopitem">
		<view class="">
			<headerNameBarVue ref="selectImage" @selectAdress='selectAdressitem' :mapName='nameselectname'
				:selectidAdress='selectAdress'></headerNameBarVue>
			<ImageSwiperVue ref="select" :selectIamgeAdress='selectIamgeAdress' :ImageArray='nameselectname'
				@selectid='selectid' @selectIndex='selectIndex' @Touchstart='Touchstart' @TouchLeave='TouchLeave'>
			</ImageSwiperVue>
			<view>
				<!-- 了解详情按钮 -->
				<uni-transition style="position: absolute; z-index: 12;" :mode-class="['fade','slide-top']"
					:show="isbutton">
					<iconWordVue :shopID="shopId"></iconWordVue>
				</uni-transition>
			</view>
		</view>
		<!-- 头部导航栏 -->
		<view class="header" :style="{transform: isxianshi ? 'translateY(0)' : 'translateY(-100%)',
			boxShadow: isxianshi ? '0px 5px 10px rgba(164, 164, 164, 0.7)' : 'none'}">
			<headerNewBarVue :shopID="shopId" :wordIndex='wordIndex' @isselect='isselect'></headerNewBarVue>
		</view>
		<view class="selectheader" :style="{transform: isSelectButton ? 'translateY(93%)' : 'translateY(-100%)',
			boxShadow: isSelectButton ? '0px 5px 10px rgba(164, 164, 164, 0.7)' : 'none'}">
			<moreGoodsVue :mapName='nameselectname' @isselect='isselectGoods'></moreGoodsVue>
		</view>
		<view class="headergiht"></view>
		<!-- 文字介绍 -->
		<guideVue></guideVue>
		<!-- 客服 -->
		<CustomerVue></CustomerVue>
		<view class="notNav">
			<notNavVue></notNavVue>
		</view>
		<backimageVue></backimageVue>
		<view class="bottomgiht"></view>
	</scroll-view>
	<bottomNavBar></bottomNavBar>
</template>


<script setup>
	import backimageVue from './components/backimage.vue';
	import {GetIndex} from '@/config/API/plane';
	import notNavVue from './components/notNav.vue';
	import CustomerVue from './components/Customer.vue';
	import moreGoodsVue from './components/moreGoods.vue';
	import headerNewBarVue from './components/headerNewBar.vue';
	import bottomNavBar from '@/components/bottomNavBar.vue';
	import guideVue from './components/guide.vue';
	import iconWordVue from './components/iconWord.vue';
	import ImageSwiperVue from './components/ImageSwiper.vue';
	import headerNameBarVue from '@/components/headerNameBar.vue';
	import {onMounted,ref} from 'vue';
	const wordIndex = ref()
	const isSelectButton = ref(false)
	const scrollTopitem = ref(-1)
	const shopId = ref()
	const isselect = () =>{
		console.log('选择的')
		isSelectButton.value = !isSelectButton.value
	}
	const isselectGoods = async(item) =>{
		console.log('选择的',item.trip_shop_id)
		selectIamgeAdress.value = item.theme_id;
		selectAdress.value = item.theme_id;
		select.value.sortData(selectAdress.value);
		wordIndex.value = item.theme_name
		isSelectButton.value = false
		isxianshi.value = false
		 scrollTopitem.value = 0;
		 setTimeout(()=>{
			  scrollTopitem.value = -1;
		 },500)
	}
	const selectAdress = ref();
	const selectIamgeAdress = ref();
	const select = ref(null);
	const selectImage = ref(null);

	const isbutton = ref(true);
	const Touchstart = () => {
		isbutton.value = false;
	};
	const TouchLeave = () => {
		setTimeout(() => {
			isbutton.value = true;
		}, 325);
	};

	onMounted(async () => {
		const data = await GetIndex();
		console.log('飞机页面初始化----》', data);
		nameselectname.value = data.data;
		shopId.value  = nameselectname.value[0].trip_shop_id
		wordIndex.value = nameselectname.value[0].theme_name
	});
	const selectid = (selectid) => {
		console.log('图片选中',selectid)
		shopId.value = selectid.trip_shop_id
		selectAdress.value = selectid.theme_id;
	};
	const isxianshi = ref(false);
	const lastScrollTop = ref(0);
	const isscro = (e) => {
		    const currentScrollTop = e.detail.scrollTop;
		    // console.log('当前滚动位置:', currentScrollTop);
		
		    if (currentScrollTop > lastScrollTop.value) {
		        // console.log('用户正在向下滚动');
		    } else if (currentScrollTop < lastScrollTop.value) {
		        // console.log('用户正在向上滚动');
				isSelectButton.value = false
				
		    }
			 lastScrollTop.value = currentScrollTop;
		if (e.detail.scrollTop > 112) {
			isxianshi.value = true;
		} else {
			isxianshi.value = false;
			isSelectButton.value = false
		}
	};


	const selectIndex = (index) => {
		selectImage.value.scrollLeft(index);
	};
	const selectAdressitem = (id) => {
		console.log('id===>', id);
		shopId.value = id.trip_shop_id
		selectIamgeAdress.value = id.theme_id;
		selectAdress.value = id.theme_id;
		select.value.sortData(selectAdress.value);
	};

	const nameselectname = ref([]);
</script>
<style scoped>
	.header {
		position: fixed;
		z-index: 19;
		top: 0;
		transition: transform 0.3s ease-out;
	}
.selectheader {
		position: fixed;
		z-index: 18;
		top: 0;
		transition: transform 0.3s ease-out;
	}
	/* 定义关键帧动画 */
	@keyframes slideLeft {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(-250rpx);
		}
	}

	@keyframes slideLeftout {
		from {
			transform: translateY(0);
		}

		to {
			transform: translateY(150rpx);
		}
	}

	/* 应用动画到 .isheaderbox */
	.isheaderbox {
		animation: slideLeft 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
		will-change: transform;
	}

	/* 应用动画到 .NOtisheaderbox */
	.NOtisheaderbox {
		animation: slideLeftout 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
		will-change: transform;
	}

	.bottomgiht {
		height: 10vh;
	}

	.headergiht {
		height: 100vh;
	}

	.scroll-Y {
		height: 100vh;
	}

	.notNav {
		margin-bottom: 30rpx;
	}
</style>